<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品查询</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <h1 class="text-3xl font-bold mb-6 text-center text-gray-800">产品查询系统</h1>

        <!-- 搜索表单 -->
        <div class="bg-white p-6 rounded-lg shadow-md mb-8">
            <div class="flex flex-col md md:flex-row gap-4">
                <div class="flex-1">
                    <label for="search-input" class="block text-sm font-medium text-gray-700 mb-1">搜索产品</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 flex">
                            <i class="fa fa-search text-gray-400"></i>
                        </span>
                        <input
                            type="text"
                            id="search-input"
                            placeholder="输入产品名称..."
                            class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200"
                        >
                    </div>
                </div>

                <div class="w-full-full md md:w-auto">
                    <label for="category-select" class="block text-sm font-medium text-gray-700 mb-1">产品分类</label>
                    <select
                        id="category-select"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200"
                    >
                        <option value="">所有分类</option>
                        <option value="电子产品">电子产品</option>
                        <option value="服装">服装</option>
                        <option value="食品">食品</option>
                        <option value="图书">图书</option>
                    </select>
                </div>

                <div class="self-end">
                    <button
                        id="search-button"
                        class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-6 rounded rounded-lg rounded transition duration-200 rounded-lg flex items-center"
                    >
                        <i class="fa fa-search mr-2"></i>搜索
                    </button>
                </div>
            </div>
        </div>

        <!-- 加载指示器 -->
        <div id="loading-indicator" class="hidden text-center py-8">
            <i class="fa fa-spinner fa-spin text-3xl text-blue-500"></i>
            <p class="mt-2 text-gray-600">正在搜索...</p>
        </div>

        <!-- 结果区域 -->
        <div id="results-container" class="bg-white rounded-lg shadow-md rounded-lg overflow-hidden">
            <div id="results-header" class="px-6 py-4 border-b border-gray-200 bg-gray-50 hidden">
                <h2 class="text-xl font-semibold text-gray-800">搜索结果</h2>
            </div>

            <div id="no-results" class="px-6 py-12 text-center hidden">
                <i class="fa fa-search-minus text-4xl text-gray-300 mb-4"></i>
                <p class="text-gray-500">没有找到匹配的产品</p>
            </div>

            <div id="results-list" class="divide-y divide-gray-200">
                <!-- 结果将通过JavaScript动态动态插入 -->
            </div>
        </div>
    </div>

    <script>
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('search-input');
            const categorySelect = document.getElementById('category-select');
            const searchButton = document.getElementById('search-button');
            const resultsList = document.getElementById('results-list');
            const resultsHeader = document.getElementById('results-header');
            const noResults = document.getElementById('no-results');
            const loadingIndicator = document.getElementById('loading-indicator');

            // 搜索功能
            function performSearch() {
                const query = searchInput.value.trim();
                const category = categorySelect.value;

                // 显示加载指示器
                loadingIndicator.style.display = 'block';
                resultsList.innerHTML = '';
                resultsHeader.classList.add('hidden');
                noResults.classList.add('hidden');

                // 构建查询URL
                const url = new URL("{% url 'search_products' %}", window.location.origin);
                if (query) url.searchParams.append('query', query);
                if (category) url.searchParams.append('category', category);

                // 发送Ajax请求
                fetch(url)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('网络响应不正常');
                        }
                        return response.json();
                    })
                    .then(data => {
                        // 隐藏加载指示器
                        loadingIndicator.style.display = 'none';

                        if (data.products.length > 0) {
                            resultsHeader.classList.remove('hidden');
                            noResults.classList.add('hidden');

                            // 清空并填充结果列表
                            resultsList.innerHTML = '';
                            data.products.forEach(product => {
                                const productElement = document.createElement('div');
                                productElement.className = 'px-6 py-4 hover:bg-gray-50 transition duration-150';
                                productElement.innerHTML = `
                                    <div class="flex flex flex-col md:flex-row md:items-center justify-between">
                                        <div>
                                            <h3 class="text-lg font-semibold text-gray-800">${product.name}</h3>
                                            <p class="text-sm text-gray-500 mt-1">${product.category}</p>
                                            <p class="text-gray-700 mt-2">${product.description}</p>
                                        </div>
                                        <div class="mt-3 md:mt-0 font-bold text-blue-600">
                                            ¥${product.price}
                                        </div>
                                    </div>
                                `;
                                resultsList.appendChild(productElement);
                            });
                        } else {
                            // 没有找到结果
                            resultsHeader.classList.add('hidden');
                            noResults.classList.remove('hidden');
                        }
                    })
                    .catch(error => {
                        console.error('查询出错:', error);
                        loadingIndicator.style.display = 'none';
                        resultsHeader.classList.add('hidden');
                        noResults.classList.remove('hidden');
                        noResults.innerHTML = `
                            <i class="fa fa-exclamation-triangle text-4xl text-yellow-500 mb-4"></i>
                            <p class="text-gray-500">查询过程中出现错误，请重试</p>
                        `;
                    });
            }

            // 绑定事件
            searchButton.addEventListener('click', performSearch);

            // 按Enter键也执行搜索
            searchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    performSearch();
                }
            });

            // 分类改变时执行搜索
            categorySelect.addEventListener('change', performSearch);

            // 初始加载所有产品
            performSearch();
        });
    </script>
</body>
</html>
